<template>
	<view>
		<view class="user-section">
			<image class="bg" src="@/static/imgs/tjyl.jpg"></image>
			<text class="bg-upload-btn yticon icon-paizhao"></text>
			<view class="portrait-box">
				<image class="portrait" @click="chooseImage" mode="aspectFill" :src="avatar ? avatar : '/static/missing-face.png'"></image>
				<text class="pt-upload-btn yticon icon-paizhao"></text>
				<!-- <button class="button" @click="getAvatar"></button> -->
			</view>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<view class="yt-list-cell">
			<view class="cell-tit clamp">
				用户名
				<input class="input" type="text" v-model="username" />
				<!-- <button class="input username" @click="getUserInfo">获取微信名称</button> -->
			</view>
		</view>
		<view class="yt-list-cell">
			<view class="cell-tit clamp">
				手机号码
				<input v-if="mobile" disabled="true" class="input" type="text" v-model="mobile" />
				<!-- <button v-else class="input" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权获取微信绑定的手机号码</button> -->
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="yt-list-cell">
			<view class="cell-tit clamp">
				用户名
				<input class="input" type="text" v-model="username" />
			</view>
		</view>
		<view class="yt-list-cell">
			<view class="cell-tit clamp">
				手机号码
				<input v-if="mobile" disabled="true" class="input" type="text" v-model="mobile" />
			</view>
		</view>
		<!-- #endif -->

		<view class="yt-list-cell">
			<button type="primary" class="btn" @click="submit">提交保存</button>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			username: '',
			mobile: '',
			avatar: ''
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	onLoad() {
		this.username = this.userInfo.username;
		this.mobile = this.userInfo.mobile;
		this.avatar = this.userInfo.avatar ? this.userInfo.avatar : '';
	},
	methods: {
		...mapMutations(['setUserInfo']),
		getAvatar(e) {
			let that = this;

			uni.getUserProfile({
				desc: '获取微信头像',
				success(res) {
					console.log(res);
					that.avatar = res.userInfo.avatarUrl;
				},
				fail(res) {
					console.log(res);
				}
			});
		},
		getUserInfo(e) {
			let that = this;

			uni.getUserProfile({
				desc: '获取微信名称',
				success(res) {
					console.log(res);
					that.username = res.userInfo.nickName;
				},
				fail(res) {
					console.log(res);
				}
			});
		},
		async getPhoneNumber(e) {
			let data = await this.$api.request('/user/decryptData', 'POST', {
				encryptedData: e.detail.encryptedData,
				iv: e.detail.iv
			});
			if (data) {
				this.mobile = data.phoneNumber;
			}
		},
		async submit() {
			if (this.username == '') {
				this.$api.msg('用户名称不能为空');
				return;
			}
			if (this.username == this.userInfo.username && this.mobile == this.userInfo.mobile && this.avatar == this.userInfo.avatar) {
				this.$api.msg('已修改');
				return;
			}
			let data = await this.$api.request('/user/edit', 'POST', {
				username: this.username,
				mobile: this.mobile,
				avatar: this.avatar
			});
			if (data) {
				let userInfo = this.userInfo;
				userInfo.username = this.username;
				userInfo.mobile = this.mobile;
				userInfo.avatar = this.avatar;
				this.setUserInfo(userInfo);
				this.$api.msg('修改成功');
			}
		},
		chooseImage() {
			uni.chooseImage({
				count: 1, // 默认9，设置为1表示只能选择一张图片
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认都有
				success: (res) => {
					this.uploadImage(res.tempFilePaths[0]); // 上传图片
				}
			});
		},
		uploadImage(path) {
			uni.uploadFile({
				url: this.$unishow + '/base/upload', // 你的图片上传接口地址
				filePath: path,
				name: 'file', // 与后台约定的文件参数名
				formData: {},
				success: (res) => {
					if (res.statusCode === 200) {
						const data = JSON.parse(res.data);
						console.log(data);
						this.avatar = data.data.fullurl;
					} else {
						console.log('上传失败:', res.errMsg);
					}
				},
				fail: () => {
					console.log('上传失败');
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
}

.user-section {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 600upx;
	padding: 40upx 30upx 0;
	position: relative;

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		filter: blur(1px);
		opacity: 0.7;
	}

	.portrait-box {
		width: 200upx;
		height: 200upx;
		border: 6upx solid #fff;
		border-radius: 50%;
		position: relative;
		z-index: 2;

		.button {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			opacity: 0;
		}
	}

	.portrait {
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.yticon {
		position: absolute;
		line-height: 1;
		z-index: 5;
		font-size: 48upx;
		color: #fff;
		padding: 4upx 6upx;
		border-radius: 6upx;
		background: rgba(0, 0, 0, 0.4);
	}

	.pt-upload-btn {
		right: 0;
		bottom: 10upx;
	}

	.bg-upload-btn {
		right: 20upx;
		bottom: 16upx;
	}
}

.yt-list-cell {
	background: #fff;
	display: flex;
	align-items: center;
	padding: 10rpx 30rpx;
	line-height: 70rpx;
	position: relative;

	.btn {
		background-color: #dba871;
		width: 100%;
		margin: 30rpx 0 60rpx;
	}

	.cell-tit {
		flex: 1;
		font-size: 26rpx;
		color: #000000;
		margin-right: 10rpx;

		.input {
			display: inline-block;
			vertical-align: middle;
			margin-left: 20rpx;
			width: 550rpx;
			float: right;
			line-height: 70rpx !important;
			height: 70rpx !important;
		}

		.username {
			width: 300rpx;
			position: absolute;
			right: 30rpx;
			z-index: 100;
		}
	}
}
</style>
